<template>
	<view class="farmingLayout pageBg">
		<custom-nav-bar title="温室"></custom-nav-bar>

		<!-- 顶部导航栏 -->
		<uni-segmented-control :current="currentTab" :values="tabs" styleType="text" activeColor="#1677ff"
			@clickItem="onTabChange" class="segmented" />

		<!-- 内容区域：根据 tab 加载不同页面 -->
		<view class="content">
			<CalendarPage v-if="currentTab === 0" />
			<PlantPage v-if="currentTab === 1" />
			<QueryPage v-if="currentTab === 2" />
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import CalendarPage from '@/components/farming-calendarPage/farming-calendarPage.vue'
	import PlantPage from '@/components/farming-plantPage/farming-plantPage.vue'
	import QueryPage from '@/components/farming-operationPage/farming-operationPage.vue'

	const tabs = ['日历', '种植管理']
	const currentTab = ref(0);

	function onTabChange(e) {
		currentTab.value = e.currentIndex
	}

	function goToInputOperation() {
		uni.navigateTo({
			url: "/pages/farming/inputOperation/inputOperation",
		});
	}

	function goToVideoMonitoring() {
		uni.navigateTo({
			url: "/pages/farming/videoMonitoring/videoMonitoring",
		});
	}
</script>

<style lang="scss" scoped>
	.farmingLayout {
		.content {
			padding: 0 30rpx;
		}
	}
</style>